/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import {NativeModules} from 'react-native'
import { PersistGate } from 'redux-persist/es/integration/react';
import ConfigureStore from './store';
import {ActionConst, Actions, Reducer, Router, Scene, Stack, Tabs} from "react-native-router-flux";
import DeviceInfo from "react-native-device-info";
import './util/logUtil';
import {
    Image,
    StatusBar,
    StyleSheet,
    Switch,
    Text,
    TouchableOpacity,
    View,
    Platform,
    BackHandler, Alert, DeviceEventEmitter
} from "react-native";
import {pTd} from "./util/adapter";

import LoginIndex from "./views/Login/loginIndex";
import ApplicationIn from './views/Login/appLicationIn'
import InformationSubmit from './views/Login/informationSubmit'
import InformationSubmitSuccess from './views/Login/informationSubmitSuccess'
import Login from './views/Login/login'
import OrderIndex from './views/Order/orderIndex'
import IncomeIndex from './views/Income/incomeIndex'
import MyInfoIndex from './views/MyInfo/myInfoIndex'

export const {store, persistor} = ConfigureStore();

const getSceneStyle ={
    backgroundColor: "#ffffff",
    shadowOffset: {width: 0, height: 0},
    elevation: 0,  // android
    shadowColor: 'black',
    shadowOpacity: 0, // 透明度
    shadowRadius: 0,
    borderWidth: 0,
};

const onBackPress = () => {

    if(Actions.state.routes[0].index > 0){
        Actions.pop()
        return true;
    }
    //弹框提示是否退出程序
    Alert.alert('温馨提示:', '确定退出应用吗？', [ { text : '取消' }, {
        text : '确定', onPress : () => {
            BackHandler.exitApp();
        }
    } ])
    return true;
}


const tabButtonIcon=(props)=>{

    return <View style={style.tabButtonWarp}>
        <Image style={style.tabIconNav} source={props.focused? props.selectedImage : props.normalImage } />
        <Text style={props.focused?style.activeTabTitle:style.tabTitle} >{props.title}</Text>
    </View>
};


export default class App extends Component{

    constructor (props) {
        super(props)

        this.state = {

        }
    }



    componentDidMount() {

    }

    componentWillUnmount () {

    }



    render() {
        //console.log(DeviceInfo.getAPILevel())
        return (
            <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <Router  sceneStyle={getSceneStyle}  backAndroidHandler={onBackPress}  >
                        <Scene key="root" >


                            {/*------------- 登录模块 ---------------*/}
                            <Stack key='_loginMain' hideNavBar type={ActionConst.REPLACE}>
                                <Scene key="LoginIndex" component={LoginIndex} hideNavBar={true} />
                                <Scene key="ApplicationIn" component={ApplicationIn} navigationBarStyle={style.navigationBar}
                                       hideNavBar={true}  />
                                <Scene key="InformationSubmit" component={InformationSubmit} navigationBarStyle={style.navigationBar}
                                       hideNavBar={false} titleStyle={style.title}  title="快速报名通道" />
                                <Scene key="InformationSubmitSuccess" component={InformationSubmitSuccess} navigationBarStyle={style.navigationBar}
                                       hideNavBar={false} titleStyle={style.title}  title="报名成功" />
                                <Scene key="Login" component={Login} navigationBarStyle={style.navigationBar}
                                       hideNavBar={false} titleStyle={style.title}  title="登录" />
                            </Stack>
                            <Stack key='_home' hideNavBar hideTabBar titleStyle={{alignSelf: 'center'}} type={ActionConst.REPLACE}>
                                <Tabs
                                    key="homeTab"
                                    gestureEnabled={false}
                                    showLabel={false}
                                    tabs
                                    swipeEnabled={true}
                                    tabBarStyle={{backgroundColor: "#fff", marginBottom: pTd(10)}}
                                    activeBackgroundColor="#fff"
                                >
                                    {/*------------- Tab导航栏 ---------------*/}
                                    <Stack key='orderTab'
                                           title={'订单'}
                                           icon={tabButtonIcon}
                                           selectedImage={require('../assets/img/icon_nav1_on.png')}
                                           normalImage={require('../assets/img/icon_nav1_gray.png')} >

                                        <Scene key="Order"  component={OrderIndex} hideNavBar/>
                                    </Stack>
                                    <Stack key='incomeTab'
                                           title={'收入'}
                                           icon={tabButtonIcon}
                                           selectedImage={require('../assets/img/icon_nav2_on.png')}
                                           normalImage={require('../assets/img/icon_nav2_gray.png')} >
                                        <Scene key="IncomeIndex"  component={IncomeIndex} hideNavBar/>
                                    </Stack>
                                    <Stack key='myInfo'
                                           title={'我的'}
                                           icon={tabButtonIcon}
                                           selectedImage={require('../assets/img/icon_nav3_on.png')}
                                           normalImage={require('../assets/img/icon_nav3_gray.png')} >

                                        <Scene key="MyInfoIndex"  component={MyInfoIndex} hideNavBar/>
                                    </Stack>
                                </Tabs>

                            </Stack>


                        </Scene>
                    </Router>
                </PersistGate>
            </Provider>
        )
    }
}

const style = StyleSheet.create({
    navigationBar:{
        borderBottomColor:"#eeeeee",
        borderStyle:'solid',
        borderBottomWidth: pTd(1),
        shadowOffset: {width: 0, height: 0},
        elevation: 0,  // android
        //marginTop: DeviceInfo.getAPILevel()<19?0:StatusBar.currentHeight,
    },
    title:{
        textAlign: 'center',
        display: "flex",
        flex:1,
        fontSize: pTd(32),
        fontWeight: 'normal',
        color: '#333333',
        marginLeft: (pTd(-75))
    },
    titleNoMargin:{
        marginLeft: 0
    },
    tabButtonWarp:{
        display: 'flex',
        flex:1,
        height:pTd(108),
        alignItems:'center',
        justifyContent:'center',
    },
    tabIconNav:{
        width:pTd(48),
        height:pTd(48),
        marginTop: pTd(16)
    },
    tabTitle:{
        fontSize:pTd(20),
        color: "#999999"
    },
    activeTabTitle:{
        fontSize:pTd(20),
        color: "#FE9727"
    }
});
